<?php namespace sacvoyage\app;

use \sacvoyage\app\HtmlApplication;

class AdminApplication extends Application {

	
	
	public function __construct() {
		//
	}
	
	public function serve($path) {
		$htmlApplication=new HtmlApplication($this->_source);
		$htmlApplication->serve($path);	
	}

	private $_source=<<<'EOF'
<html>

<head>
	
<style>

body {
	background: silver;
	padding: 10px;
}

div#all>form {

	background: white;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	margin: 0px;
}

form>p.title {
	font-weight: bold;
	font-size: 1.2em;
}

form>p{
	margin: 0px;
}

form td:first-child {
	text-align: right;
}

div#all {
	align: center;
	border-style:solid;
	border-width: 1px;
	border-color: grey
	padding: 10px;
	background-color: #FCF2EA;
	margin: auto;
	width: 950px;
}

body div#all>* {
	width: 930px;
	margin: 9px;
}


body div#all>p.title {
	font-size: x-large;
	font-weight: bold;
	text-align: center;
}



ul#documentList {
	list-style: none;
	padding: 0px;
	background: white;
	border-width: 1px;
	border-style: solid;
}

ul#documentList li {
	padding: 5px;
	margin: 0px;
}

ul#documentList li p { margin: 0px; padding: 0px;}
ul#documentList li p.title { 
	font-weight: bold; 
	font-size: 1.25em;
}

ul#documentList li p.body:hover { 
	text-decoration: underline;
	cursor: hand;
}

ul#documentList li.odd {
	background: #FCE5E6;
}

ul#documentList li.even {
	background: white;
}


ul#documentList li a.delete {
	font-style: italic;
	font-weight: normal;
	font-size: .66em;
}


ul#documentList li:hover a.delete:hover {
	text-decoration: underline;
	cursor: hand;
}

</style>
</head>
<body onload="load();">





<script language="JavaScript">


function load() {
	updateCollectionList(document.write.collection_list);
	updateCollectionList(document.delet.collection_list);
	updateCollectionList(document.query.collection_list);
	updateCollectionList(document.upload.collection_list);

	submitQuery();
}

function updateCollectionList(list) {
	list.innerHTML='';
	collections=sacvoyage.getCollectionNames();

	for(i in collections) {
		option=document.createElement("option");
		option.setAttribute("value", collections[i]);
		option.appendChild(document.createTextNode(collections[i]));
		list.appendChild(option);
	}
	list.selectedIndex=0;

	var event = document.createEvent("HTMLEvents");
	event.initEvent("change", true, true ); // event type,bubbling,cancelable
	list.dispatchEvent(event);
}


function help_status(element) {
	try {
		doc=JSON.parse(element.value);
	} catch (e) {
		doc={};
	}

	if(doc.status=="all") {
		doc.status="stale"
	} else if(doc.status=="stale") {
		doc.status="actual";
	} else {
		doc.status="all";
	}
	element.value=JSON.stringify(doc);
}

</script>


<style>

ul.tabber {
	list-style: list-style: none;
	font-size: 1.25em;
	margin: 0px;
	padding: 0px;
}

ul.tabber>li {
	padding: 3px;
	display: inline-block;
	border-style: solid solid none solid;
	border-width: 1px;
	padding: 3px;
	margin: 0px;
}

ul.tabber>li.selected {
	border-style: solid solid none solid;
	background: white;
	font-weight: bold;
}

ul.tabber>li:hover {
	cursor: hand;
	background: white;
}

</style>


<script>
// code for tab behaviour
com_legeyda_tabber={};

com_legeyda_tabber.tabClick=function(event) {
	current=event.target;
	tabs=current.parentNode.getElementsByTagName("li");
	for(i=0; i<tabs.length; i++) {
		tab=tabs[i];
		body=document.getElementById(tab.getAttribute("data-for"));
		if(body) {
			if(tab==current) {
				body.style.display="";
				tab.className="selected";
			} else {
				body.style.display="none";
				tab.className="";
			}
		}
	}
}

com_legeyda_tabber.initTabber=function(ul) {
	tabs=ul.getElementsByTagName("li");
	for(i=0; i<tabs.length; i++) {
		tab=tabs[i];
		tab.addEventListener("click", com_legeyda_tabber.tabClick, false);
		body=document.getElementById(tab.getAttribute("data-for"));
		if(body) {
			if(tab.className=="selected") {
				body.style.display="";
			} else {
				body.style.display="none";
			}
		}
	}
}

com_legeyda_tabber.init=function() {
	uls=document.getElementsByTagName("ul");
	for(i in uls) {
		ul=uls[i];
		if(ul.className=="tabber") {
			com_legeyda_tabber.initTabber(ul);
		}
	}
}

window.addEventListener("load", com_legeyda_tabber.init, false);

</script>


<div id="all">
	<p class="title">sacvoyage admin page</p>

	<ul class="tabber">
		<li id="write-tab" data-for="form_write">Write</li>
		<li id="delete-tab" data-for="form_delete">Delete</li>
		<li id="query-tab" data-for="form_query" class="selected">Query</li>
		<li id="upload-tab" data-for="form_upload">Upload</li>
	</ul>


	<script>
	function submitWrite(event) {
		if(event) {
			event.preventDefault();
		}
		collection=sacvoyage.getCollection(document.write.collection.value);
		collection.write(JSON.parse(document.write.document.value));
		document.query.submit();
		return false;
	}
	</script>
	<form id="form_write" name="write" onsubmit="return submitWrite(arguments[0]);">
		<p class="title">Write document to sacvoyage</p>
		<table border="0px">
			<tr>
				<td>Collection:</td>
				<td>
					<select name="collection_list"/>
					<input type="text" name="collection"/>
				</td>
			</tr>
			<tr>
				<td>JSON-<br/>Document:</td>
				<td>
					<textarea name="document" cols="100" rows="3"></textarea>
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="     write document    "/></td>
			</tr>
		</table>
	</form>

	<script>
		function submitDelete(event) {
			if(event) {
				event.preventDefault();
			}
			collection=sacvoyage.getCollection(document.delet.collection.value);
			collection.delet(JSON.parse(document.delet.query.value));
			document.query.submit();
			return false;
		}
	</script>
	<form id="form_delete" name="delet" onsubmit="return submitDelete(arguments[0]);">
		<p class="title">Delete documents from sacvoyage</p>
		<table border="0px">
			<tr>
				<td>Collection:</td>
				<td>
					<select name="collection_list"/>
					<input type="text" name="collection"/>
				</td>
			</tr>
			<tr>
				<td>JSON-<br/>Query:</td>
				<td>
					<textarea name="query" cols="100" rows="3"></textarea>
					<a onclick="help_status(document.delet.query); return false;">state</a>
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="     delete documents    "/></td>
			</tr>
		</table>
	</form>

	<script>
	function submitQuery(event) {
		if(event) {
			event.preventDefault();
		}
		collection=document.query.collection.value;
		
		if(document.query.query.value) {
			documents=sacvoyage.getCollection(collection).find(JSON.parse(document.query.query.value));
		} else {
			documents=sacvoyage.getCollection(collection).find();
		}

		ul=document.getElementById("documentList");
		ul.innerHTML="";
		
		if(documents.length>0) {
			j=0;
			for(i in documents) {
				li=document.createElement("li");
				li.sacvoyageDocument=documents[i];
				li.className=(j++)%2==0 ? "odd" : "even";

				p=document.createElement("p");
				p.className="title";
				li.appendChild(p);
				
				title="";
				if(documents[i]._id) { 
					title+=documents[i]._id;
				}
				if(documents[i]._rev) {
					title+="~"+documents[i]._rev;
				}
				p.appendChild(document.createTextNode(title+" "));

				a=document.createElement("a");
				a.className="delete";
				//a.setAttribute("href", "#");
				a.appendChild(document.createTextNode("delete"));
				a.addEventListener("click", deleteDocument, false);
				p.appendChild(a);

				p=document.createElement("p");
				p.className="body";
				p.appendChild(document.createTextNode(JSON.stringify(documents[i])));
				p.addEventListener("click", editDocument, false);
				li.appendChild(p);

				ul.appendChild(li);
			}
		} else {
			ul.innerHTML="<p>empty</p>";
		}
		
		return false;
	}
	</script>
	<form name="query" id="form_query" onsubmit="return submitQuery(arguments[0]);">
		<p class="title">Make query on sacvoyage</p>
		<table border="0px">
			<tr>
				<td>Collection:</td>
				<td>
					<select name="collection_list"/>
					<input type="text" name="collection"/>
				</td>
			</tr>
			<tr>
				<td>JSON-<br/>Query:</td>
				<td>
					<textarea name="query" cols="100" rows="3"></textarea><br/>
					<a onclick="help_status(document.query.query); return false;">state</a>
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="     query collection    "/></td>
			</tr>
		</table>
	</form>


	<script>
	function submitUpload(event) {
		document.upload.method="POST";
		document.upload.action='file/'+document.upload.collection.value+'/'+document.upload._id.value;
	}
	</script>
	<form name="upload" id="form_upload" onsubmit="return submitUpload(arguments[0]);" method="post" enctype="multipart/form-data">
		<p class="title">Make query on sacvoyage</p>
		<table border="0px">
			<tr>
				<td>Collection:</td>
				<td>
					<select name="collection_list"/>
					<input type="text" name="collection"/>
				</td>
			</tr>
			<tr>
				<td>_id:</td>
				<td>
					<input type="text" name="_id"/>
				</td>
			</tr>
			<tr>
				<td>File:</td>
				<td>
					<input type="file" name="_data" size="50">
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="     upload file    "/></td>
			</tr>
		</table>
	</form>



	<script>
	function deleteDocument(event) {
		event.preventDefault();
		li=event.target.parentNode.parentNode;
		if(li.sacvoyageDocument._id) {
			query=new Object();
			query.filter=new Object();
			query.filter._id=li.sacvoyageDocument._id;
			if(li.sacvoyageDocument._rev) {
				query.status="all"; // can be "stale", "actual" or "all"
				query.filter._rev=li.sacvoyageDocument._rev;
			};
			//sacvoyage.getCollection(document.write.collection.value).delet(query);
			document.delet.query.value=JSON.stringify(query);
			com_legeyda_tabber.tabClick({"target": document.getElementById("delete-tab")});
		}
		submitQuery();
		return false;
	}
	function editDocument(event) {
		li=event.currentTarget.parentNode;
		document.write.collection_list.selectedIndex=document.query.collection_list.selectedIndex;
		document.write.collection.value=document.query.collection.value;
		document.write.document.value=JSON.stringify(li.sacvoyageDocument);
		com_legeyda_tabber.tabClick({"target": document.getElementById("write-tab")});
		
		window.scrollTo(0,0);

		event.preventDefault();
		return false;
	};
	</script>
	<ul id="documentList"/>

</div>
<script>

	document.write.collection_list.addEventListener("change", function(){
		document.write.collection.value=document.write.collection_list.value;
	}, false);

	document.delet.collection_list.addEventListener("change", function(){
		document.delet.collection.value=document.delet.collection_list.value;
	}, false);

	document.query.collection_list.addEventListener("change", function(){
		document.query.collection.value=document.query.collection_list.value;
	}, false);

	document.upload.collection_list.addEventListener("change", function(){
		document.upload.collection.value=document.upload.collection_list.value;
	}, false);



</script>

<body>
</html>
	
EOF;
	
}


?>
